SPHERITY DESIGN — UI/UX GUIDE

design.md für die Spherity-Produktfamilie. Built on CI, Aktionsplan, and what actually works.

Vier Produkte (CARO, VERA, EIDA, KYLE), ein Designsystem, zwei Surface-Typen (B2B-App + Public DPP) — alles in einem Dokument, abgestützt auf die Spherity CI Guidelines, den Aktionsplan KI-Einsatz und unsere eigenen DPP-Audits.

EINE FAMILIE — VIER PRODUKTE

DSCSA Compliance Pharma-Authentifizierung & US-Lieferketten-Track

Digital Product Passport B2B-App + Public DPP nach EU-ESPR / Battery / Textile

EU Business Wallet eIDAS 2.0 — Org-Identität, VC-Issuance & -Verifikation

Know Your Legal Entity EIDA-Spin-off — KYC-Workflows für Legal Entities

WAS DRIN STECKT

VERA · DPPs · battery / acme-cell-7be3

Heavyweight Battery Cell — Charge 0042

Issued by Acme GmbH · Last updated DD.MM.YYYY · Trust Anchor: Bundesanzeiger Verlag

Verifiziert Zur Überprüfung Fehlgeschlagen Abgelaufen

Bundesanzeiger Verlag did:web:bundesanzeiger.de

Vertrauenswürdiger Aussteller

Signiertes Unternehmens-Credential, geprüft via Bitstring Status List. Keine Revocation, Signatur valid.

Compliance

EU Battery Reg92%

ESPR-Felder76%

Spherity-Tokens (CI)

Brand · Primary

#023852

#192B38

#2BFEBB

#EEEEEE

Brand · Secondary (Neutrals)

#A5A5A5

#445260

Base · System / Status

#079455

#F79009

#F96D61

#B62549

Product · Sub-Brand-Akzente (≤ 10 % Fläche)

#1F6F8B

#2C6F7B

#4961A8

#4D5B6A

Ein Designsystem (Untitled UI Pro → Spherity UI Extensions → Produkt-Files), ein Brand-System (Spherity CI), eine A11y-Latte (WCAG 2.1 AA als Hard-Block). Diese Mock zeigt nicht ein konkretes Produkt — sondern die gemeinsame Sprache, die design.md über alle vier Produkte spannt.

WAS WIR FRÜHER GEMACHT HABEN

Vier Produkte, vier Stilrichtungen, vier Audit-Logs.

Komponenten pro Produkt neu gebaut, gleiche Probleme mehrfach gelöst
Sub-Brand-Akzente nach Bauchgefühl statt aus der CI
A11y als Nice-to-Have, nicht als Release-Hard-Block
Public-DPPs ohne fixe System-Colors — Status-Wahrnehmung beim Brand
KI-Output ungeprüft in Produkt-Files
Animations-Pakete ohne gemeinsamen Default-Stack
White-Label-Anpassungen ad hoc, ohne Token-Contract
POCs ohne Design-Contract — Sales-Demos sehen aus wie Prototypen

WAS DIESE DESIGN.MD GIBT

Eine Quelle. Vier Produkte. Konsistente UX, konsistente Compliance.

Drei-Layer-Hierarchie: Untitled UI Pro → Spherity UI Extensions → Produkt-Files
CI-konforme Sub-Brand-Akzente (CARO Petrol, VERA Arctic Blue, EIDA Indigo, KYLE Gunmetal)
WCAG 2.1 AA als Hard-Block, Cyan-Focus-Ring 2 px, Offset 2 px
Fixed System-Colors auf Public-DPPs trotz Brand-Customization
White-Label kuratiert über Spherity-Design-Team mit Locked-vs-Customizable-Token-Contract
POC-Design-Contract: was MUSS halten, was DARF skizzenhaft bleiben, wann graduiert ein POC
KI nur in der POC-Bibliothek; Produktcode review-pflichtig
Frontend-Stack-Doc separat: Framer Motion · GSAP · @gsap/react · Lenis

NEU IN v1.4 · 2026-05-29

Tonal Variants + Anti-Slop-Prinzipien.

Brand-Farben sind jetzt Tonal-Scales (5 Stops für Key-Colors · 3 Stops für Sub-Brands). Parallel haben wir Spherity gegen den Slop-Katalog von impeccable.style (46 AI-Tells) auditiert und §11.8.6 Anti-Slop-Prinzipien als Hard-Section eingeführt.

§11.1.6 · TONAL VARIANTS

5 Stops für Key-Colors, 3 für Sub-Brands.

.500 = Brand-Hex. Tints (.100/.300) brighten with white, Shades (.700/.900) deepen with black. Status-Farben sind ausgeschlossen.

Siehe brand-board.html → §02.5 · products.html · social.html

§11.8.6 · ANTI-SLOP

Bewusste Differenzierung vom AI-Aesthetic.

12 Hard-Rules (Side-tab borders · Nested cards · Glow-Shadows · Hero-Metric-Layout · Marketing-Buzzwords), 4 Soft-Rules (max. 1 Eyebrow / Page) und 5 explizit erlaubte Brand-Patterns (Cyan-on-Petrol · Top-Bar 6 px · F4F2EE · Doku-Numbering).

× Side-tab 4 px → Top-Bar 6 px
× Nested cards · Glow-Shadows
✓ Cyan auf Petrol — intentional

Self-Audit-Workflow → system.md §11.8.6.5

Das Format ist nur der Rahmen. Der Wert liegt in dem, was Spherity-spezifisch drinsteht.